<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的遍历中绑定的key的问题</title>


    <script src="./js/17react/react.development.js"></script>
    <script src="./js/17react/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /**
         * 使用index绑定key的弊端：效率低下，界面没有问题，如果有输入类的DOM,更新DOM之后可能会有界面上的问题
         * 使用id唯一标识符绑定key界面没有问题
         *
         * 建议：如果单单只是页面的渲染没有对数据的逆序添加或者逆序删除，则可以使用index；反之就用唯一标识符id等等
         */
       class Person extends React.Component{
           state = {
               persons:[
                   {id:1,name:'小刘',age:18},
                   {id:2,name:'小张',age:19},
                   {id:3,name:'小飞',age:20}
               ]
           }
           add=()=>{
               const {persons} = this.state
               const p = {id:persons.length+1,name:'小王',age:19}
               this.setState({persons:[p,...persons]})
               console.log('persons',persons)
           }
           render(){
               return (
                   <div>
                       <h2>展示人员信息</h2>
                       <h3>使用index绑定</h3>
                       <button onClick={this.add}>添加一个小王</button>
                       <ul>
                           {
                               this.state.persons.map((item,index)=>{
                                   return <li key={index}>{item.name}---{item.age}
                                       <input type="text"/>
                                   </li>
                               })
                           }
                       </ul>
                       <hr/>
                       <hr/>
                       <h3>使用id绑定</h3>
                       <ul>
                           {
                               this.state.persons.map(item=>{
                                   return <li key={item.id}>{item.name}---{item.age}<input type="text"/>
                                   </li>
                               })
                           }
                       </ul>




                   </div>
               )
           }
       }

        ReactDOM.render(<Person />,document.getElementById('app'))




    </script>
</body>
</html>
